import React, { useState } from "react";
import { Link } from "umi";
import { Avatar, Button, Tabs, Input,Collapse  } from "antd";
import {
  UserOutlined,
  DownloadOutlined,
  SearchOutlined,
  CaretRightOutlined 
} from "@ant-design/icons";
import IconFont from "@/components/iconfont";
import styles from "./detail.less";

enum SortType {
  up,
  down,
  none,
}
const { Panel } = Collapse
type HeaderItemType = {
  title: string;
  sortType: SortType;
};

const { TabPane } = Tabs;
const SongList: React.FC = () => {
  const headerColumns = [
    {
      title: "音乐标题",
      sortType: SortType.none,
    },
    {
      title: "歌手",
      sortType: SortType.none,
    },
    {
      title: "专辑",
      sortType: SortType.none,
    },
    {
      title: "时长",
      sortType: SortType.none,
    },
  ];
  const [header, setHeader] = useState<HeaderItemType[]>(headerColumns);
  const data = [
    {
      title: "同渡",
      singer: "同渡",
      album: "同渡",
      duration: "200",
    },
  ];
  const handleChange = () => {};

  return (
    <div className={styles["song-wrap"]}>
      <div className={styles["search-wrap"]}>
        <Input placeholder="搜索歌单音乐" prefix={<SearchOutlined />} />
      </div>
      <ul className={styles["table-header"]}>
        <li>&nbsp;</li>
        {header.map((item: HeaderItemType) => (
          <li>
            {item.title}
            {item.sortType === SortType.none && (
              <IconFont type="iconpaixu-" className={styles["sortble"]} />
            )}
            {item.sortType === SortType.up && (
              <IconFont type="iconpaixu-shang" className={styles["sortble"]} />
            )}
            {item.sortType === SortType.down && (
              <IconFont type="iconpaixu-xia" className={styles["sortble"]} />
            )}
          </li>
        ))}
      </ul>
      <ul className={styles["table-body"]}>
        <li>
          <div>
            <IconFont type="iconyinliang" className={styles["icon-btn"]} />
            <IconFont
              type="iconxihuan"
              style={{ marginLeft: "20px" }}
              className={styles["icon-btn"]}
            />
            <DownloadOutlined
              style={{ marginLeft: "10px" }}
              className={styles["icon-btn"]}
            />
          </div>
          <div className={styles["song-item-info"]}>
            <em>同渡</em>
            <span className={styles["song-item-text"]}>
              (电影《侍神令》推广曲)
            </span>
            <span className={styles["song-item-sq"]}>SQ</span>
            <IconFont
              type="iconbofang1"
              style={{ color: "#d13c37", fontSize: "16px", marginLeft: "2px" }}
            />
            <IconFont type="icondian" className={styles["icon-more"]} />
          </div>
          <div>金玟岐</div>
          <div>同渡 (电影《侍神令》) 推广曲</div>
          <div>04:58</div>
        </li>
      </ul>
    </div>
  );
};

const Comment: React.FC = () => {
  return <>评论</>;
};

const Collectors: React.FC = () => {
  return <>收藏者</>;
};

const RecommendDetail: React.FC = () => {
  const imgSrc =
    "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";

  const onTabChange = () => {
    console.log("onTabChange");
  };

  return (
    <>
      <div className={styles["topic"]}>
        <div className={styles["image-area"]}>
          <img src={imgSrc} alt="" />
        </div>
        <div className={styles["desc"]}>
          <h4 className={styles["title"]}>
            <span>歌单</span>
            别瘪嘴啦！记得向明天展露微笑
          </h4>
          <div className={styles["creater"]}>
            <Avatar size="small" icon={<UserOutlined />} />
            <Link
              to="/"
              style={{ margin: "0 10px", color: "#527ead", fontSize: "14px" }}
            >
              听音乐吃火锅看烟花
            </Link>
            <span>2020-12-29创建</span>
          </div>
          <div className={styles["btns"]}>
            <Button
              shape="round"
              icon={<IconFont type="iconziyuan" />}
              className={styles["btn"]}
            >
              播放全部
              <span>+</span>
            </Button>
            <Button
              shape="round"
              icon={<IconFont type="iconplus" />}
              className={styles["btn"]}
            >
              收藏
            </Button>
            <Button
              shape="round"
              icon={<IconFont type="iconfenxiang1" />}
              className={styles["btn"]}
            >
              分享
            </Button>
            <Button
              shape="round"
              icon={<DownloadOutlined />}
              className={styles["btn"]}
            >
              下载全部
            </Button>
          </div>
          <div className={styles["song-info"]}>
            <p>
              <label>标签:</label>
              <Link to="/">华语 / 孤独 / 思念</Link>
            </p>
            <p>
              <label>歌曲数:</label>
              <span>42</span>
              <label style={{ marginLeft: "15px" }}>歌曲数:</label>
              <span>171万</span>
            </p>
            <p className={styles['hidden-overflow']}>
              <label>简介 :</label>
              <span>
                纵使我们会经历许多麻烦， 也许是学业和工作上的压力，
                或许是朋友之间的争吵， 也可能是恋人之间的矛盾，
                家人之间的隔阂......
                但我们也要学会和解，学会体谅，学会放过自己，
                向明天展露微笑，让所有的遗憾过去。
                <br />
                <br />
                封面：Pinterest
              </span>
              
            </p>
          </div>
        </div>
      </div>
      <Tabs defaultActiveKey="1" onChange={onTabChange}>
        <TabPane tab="歌曲列表" key="1">
          <SongList />
        </TabPane>
        <TabPane tab="评论" key="2">
          <Comment />
        </TabPane>
        <TabPane tab="收藏者" key="3">
          <Collectors />
        </TabPane>
      </Tabs>
    </>
  );
};
export default RecommendDetail;
